﻿@{
    Layout = null;
}
<!DOCTYPE html>

<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>角色列表</title>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/jqueryEasyui/js")
    @Styles.Render("~/jqueryEasyui/css")

    <script type="text/javascript">
        $(function () {
            $('#cc').layout();


            //初始化角色列表
            $("#GridList").datagrid({
                url: "/adminweb/role/RolesRelated?key=",
                //height: 240,
                fit: true,
                singleSelect: true,
                columns: [[
                    { title: "角色名称", field: "RoleName", width: 150, halign: "center" },
                    {
                        title: "状态", field: "IsDisabled", width: 70, align: "center",
                        formatter: function (value, row, index) {
                            if (value) {
                                return "开启";
                            } else {
                                return "禁用";
                            }
                        }
                    },
                    {
                        title: "创建时间", field: "CreateTime", width: 130, align: "center",
                        formatter: function (value, row, index) {
                            return sjn.toDate(value).format();
                        }
                    },
                    {
                        title: "操作", field: "tool", width: 90, align: "center",
                        formatter: function (value, row, index) {
                            var htm = '<a href="javascript:void(0)" class="gridEdit" onclick="EditAlter(' + index + ')" >编辑</a>';
                            return htm;
                        }
                    }
                ]],
                onLoadSuccess: function (data) {
                    $('.gridEdit').linkbutton({
                        iconCls: 'icon-edit',
                        plain: true
                    });
                },
                //单击事件
                onClickRow: function (rowIndex, rowData) {

                    //加载该角色下的用户
                    $("#userKey").searchbox("setValue", "");
                    getUser();
                    allUncheck();
                    $(rowData.T_MenuInRoles).each(function (i, item) {
                        var node = $('#menuTree').tree('find', item.MenuID);
                        if (node.children.length == 0) {
                            $("#menuTree").tree("check", node.target);
                        }

                    });

                }
            });

            //初始化用户列表
            $('#userList').datagrid({
                //url: "/adminweb/role/getUser?rid=&key=",
                singleSelect: false,
                //height: $("#userpanel").height() - 45,
                fit: true,
                onLoadSuccess: function () {
                    $('.easyui-linkbutton').linkbutton({ height: 20 });
                },
                columns: [[
                    { title: "用户姓名", field: "UserName", width: 150, halign: "center" },
                    { title: "用户名", field: "Account", width: 150, halign: "center" },
                    { title: "Email", field: "Email", width: 200, halign: "center" },
                    {
                        title: "状态", field: "IsDisabled", width: 70, align: "center",
                        formatter: function (value, row, index) {
                            if (value) {
                                return "开启";
                            } else {
                                return "禁用";
                            }
                        }
                    },
                    {
                        title: "创建时间", field: "CreateTime", width: 140, align: "center",
                        formatter: function (value, row, index) {
                            return sjn.toDate(value).format();
                        }
                    }
                ]]
            });  // end datagrid

            //初始化菜单树
            $("#menuTree").tree({
                title: "sdfsdf",
                url: "/adminweb/role/getTree",
                checkbox: true,
                cascadeCheck: true
            });

        })

        //用户DataGrid 加载用户、检索加载 
        var getUser = function () {
            var selData = $("#GridList").datagrid("getSelected");
            if (selData == null) {
                $.messager.alert('提示', '请选择一个角色信息!');
                return;
            }
            var key = $("#userKey").searchbox("getValue");
            $('#userList').datagrid({
                url: "/adminweb/role/getUser?rid=" + selData.RoleID + "&key=" + key,
            })
        }

        //角色 DataGrid 加载信息、检索加载 
        var roleSearch = function () {
            $("#GridList").datagrid({
                url: "/adminweb/role/RolesRelated?key=" + $("#roleKey").searchbox("getValue")
            });
        }

        //角色 DataGrid 某角色编辑 弹出窗体
        var EditAlter = function (index) {
            var item = $("#GridList").datagrid("getData").rows[index];
            if (item == null || item == undefined) {
                return;
            }
            $.ifdata("editData", item);

            $("#roleForm").dialog({
                title: '角色信息修改',
                width: 480,
                height: 300,
                closed: false,
                cache: false,
                content: '<iframe scrolling="no" frameborder="0" src="/adminweb/role/edit" style="width:100%;height:98%;"></iframe>',
                modal: true,
                onClose: function () {
                    $.ifdataRemove("editData");
                    roleSearch();

                }
            })
        }

        // 创建新角色 弹出窗体
        var AddRole = function () {
            $("#roleForm").dialog({
                title: '创建新角色',
                width: 480,
                height: 300,
                closed: false,
                cache: false,
                content: '<iframe scrolling="no" frameborder="0" src="/adminweb/role/add" style="width:100%;height:98%;"></iframe>',
                modal: true,
                onClose: function () {
                    roleSearch();
                }
            })
        }

        // 对某角色添加新的用户 弹出窗体
        var AddUser = function () {
            var rd = $("#GridList").datagrid("getSelected");
            if (rd == null || rd == undefined) {
                $.messager.alert("提示", "请选择一个角色！");
                return;
            }
            var data = $("#userList").datagrid("getData");
            $.ifdata("dialogUser", { roleid: rd.RoleID, user: data });

            $("#dialogUser").dialog({
                title: '选择要添加的用户',
                width: 590,
                height: 450,
                closed: false,
                cache: false,
                content: '<iframe scrolling="no" frameborder="0" src="/adminweb/user/dialoguserlist" style="width:100%;height:98%;"></iframe>',
                modal: true,
                onClose: function () {
                    var data = $.ifdata("dialogUser");
                    for (var i = 0; i < data.length; i++) {
                        $("#userList").datagrid("appendRow", data[i]);
                    }
                }
            })
        }

        // 删除   对某角色中的用户进行删除
        var deleteUser = function () {
            var rd = $("#GridList").datagrid("getSelected");
            var data = $("#userList").datagrid("getSelections");

            if (rd == null || rd == undefined) {
                $.messager.alert("系统提示", "请选择角色！", "info");
                return;
            }
            if (data == null || data == undefined || data.length == 0) {
                $.messager.alert("系统提示", "请选择要删除的用户！", "info");
                return;
            }

            $.messager.confirm("系统提示", "确定将此用户从该角色中删除吗？", function (r) {
                if (r) {
                    var ids = [];
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].UserID);
                    }

                    $.post(
                        "/adminweb/role/deleteUser",
                        {
                            roleid: rd.RoleID,
                            userIds: ids.join(",")
                        },
                        function (d) {
                            if (d.status == "y") {
                                $.messager.alert("系统提示", d.info, "info", function () {
                                    for (var i = 0; i < data.length; i++) {
                                        var idx = $("#userList").datagrid("getRowIndex", data[i]);
                                        $("#userList").datagrid("deleteRow", idx);
                                    }
                                })
                            } else {
                                $.messager.alert("系统提示", d.info, "error")
                            }
                        });
                }
            });



        }

        //“保存权限配置” 按钮事件
        var updateMenu = function () {
            var checks = $("#menuTree").tree("getChecked", ['checked', 'indeterminate']);
            var selRole = $("#GridList").datagrid("getSelected");
            var idsStr = "", roleId = "";

            //判断是否选择角色
            if (selRole == null) {
                $.messager.alert('提示', "请选择要配置菜单权限的角色！");
                return;
            }
            roleId = selRole.RoleID;

            var ms = [];
            $(checks).each(function (i, item) {
                idsStr += item.id + ",";
                ms.push({ MenuID: item.id });
            });

            var idx = $("#GridList").datagrid("getRowIndex", selRole);
            selRole.T_MenuInRoles = ms;
            $("#GridList").datagrid("updateRow", { index: idx, row: selRole });

            $.post("/adminweb/role/updateMenu",
                    {
                        roleId: roleId,
                        menuIds: idsStr
                    },
                    function (ms) {
                        $.messager.alert('提示', ms.info);
                    }, "json")

        };

        //全选
        var allCheck = function () {
            var unchecked = $("#menuTree").tree("getChecked", "unchecked");
            $(unchecked).each(function (i, item) {
                if (item.children.length == 0) {
                    $("#menuTree").tree("check", item.target);
                }
            })
        }

        var allUncheck = function () {
            var checked = $("#menuTree").tree("getChecked", ['checked', 'indeterminate']);
            $(checked).each(function (i, item) {
                if (item.children.length == 0) {
                    $("#menuTree").tree("uncheck", item.target);
                }
            })
        }

        var layoutResize = function () {
            //$("#GridList").datagrid("resize", { height: 10 });
            //$("#userList").datagrid("resize", { height: $("#userpanel").height() - 45 });
        }

    </script>

    <style type="text/css">
        .tree-node {
            height: 25px;
            line-height: 25px;
        }
    </style>
</head>
<body style="height: 100%">
    <div id="layout" class="easyui-layout" style="height: 98%">
        <div data-options="region:'west',split:false,border:false" style="width: 470px; height: 100%;">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',split:true,border:true,onStopResize:layoutResize()" style="height: 280px">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'north',split:false,border:false" style="height: 37px">
                            <div style="margin: 5px 0;">
                                <span style="margin-left: 10px;">角色名称：</span>
                                <input id="roleKey" class="easyui-searchbox" data-options="prompt:'请输入角色名称',searcher:roleSearch" style="width: 250px" />
                                <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-left: 20px;" onclick="AddRole()" data-options="plain:true,iconCls:'icon-save'">创建角色</a>
                            </div>
                        </div>
                        <div data-options="region:'center',split:false,border:false">
                            @* 角色 Gird *@
                            <table id="GridList"></table>
                        </div>
                    </div>


                </div>
                <div data-options="region:'center',split:false,border:true">
                    <div class="easyui-layout" data-options="fit:true,split:false,border:false">
                        <div data-options="region:'north',split:false,border:false" style="height: 85px">
                            <div id="userpanel" class="easyui-panel" title="&nbsp;用户列表" style="width: 700px; height: 200px; padding: 10px;"
                                data-options="closable:false,fit:true,tools:'#tt',border:false">
                                <div style="margin-bottom: 4px;">
                                    <span style="margin-left: 10px;">用户名称：</span>
                                    <input id="userKey" class="easyui-searchbox" data-options="prompt:'请输入用户名称、用户名',searcher:getUser" style="width: 250px" />
                                </div>
                                <div style="color: red; margin-bottom: 6px;">注：此用户不会和右侧菜单产生依赖关系。</div>

                            </div>
                            <div id="tt">
                                <a href="javascript:void(0)" class="icon-add" style="background-position: left; width: 50px; text-indent: 20px; color: #444; text-decoration: none;" onclick="AddUser()">添加</a>
                                <a href="javascript:void(0)" class="icon-remove" style="background-position: left; width: 50px; text-indent: 20px; color: #444; text-decoration: none; margin-left: 10px;" onclick="deleteUser()">删除</a>
                            </div>
                        </div>
                        <div data-options="region:'center',split:false,border:false" style="padding: 0 5px 5px 5px;">
                            @* 用户 Gird *@
                            <table id="userList"></table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div data-options="region:'center'" style="width: 450px;">
            <div style="min-width: 400px; max-width: 100%;" class="panel-header">
                <div class="panel-title">
                    系统菜单树
                </div>
            </div>
            <div class="datagrid-toolbar" style="height: 28px; min-width: 430px;">
                <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-top: 2px; float: left;" onclick="allCheck()" data-options="plain:true,iconCls:'icon-add'">全选</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-top: 2px; float: left;" data-options="plain:true,iconCls:'icon-add'" onclick="allUncheck()">全不选</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-top: 2px; float: left;" data-options="plain:true,iconCls:'icon-add'" onclick='$("#menuTree").tree("expandAll");'>全部展开</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-top: 2px; float: left;" data-options="plain:true,iconCls:'icon-add'" onclick='$("#menuTree").tree("collapseAll");'>全部合闭</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" style="float: right; margin-top: 2px; margin-right: 20px;" data-options="plain:true,iconCls:'icon-save'" onclick="updateMenu()">保存权限配置</a>
            </div>
            <ul id="menuTree" style="margin: 10px 0 0 20px;">
            </ul>
        </div>
    </div>
    <div id="roleForm"></div>
    <div id="dialogUser"></div>
</body>
</html>
